<!-- 基础设置->客户分类 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="accont-set-wrapper business-big-box wh100">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="addshowModal">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="Edit(record,index)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="Delete(record,index)">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <!-- <a-col :span="2">
                            <div class="btns" @click="getData">
                                <a-icon class="btns-icon" type="file-search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col> -->
                    </a-col>
                </a-row>
            </div>

            <!-- 表格数据 -->
            <div class="table-wrapper">
                <a-table :columns="columns" :customRow="customClick" :data-source="postData" :scroll="{ x: 1000, y: 300 }" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="pagination" @change="onTableChange" :loading="loading" :size="small" bordered>

                    <!-- 操作 -->
                    <template slot="operate" slot-scope="text, record, index">
                        <div class="row justify-content-md-center">
                            <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                                <a href="javascript:;" title="删除" class="mr-1 col-1" @click="Delete(record,index)"><i class="fa fa-trash-alt" style="color: #dd5a43;"></i></a>
                                <a href="javascript:;" title="修改" class="mr-1 col-1" @click="Edit(record,index)"><i class="fa fa-edit" style="color: #40a9ff;"></i></a>
                            </span>
                        </div>
                    </template>
                </a-table>
            </div>
            <!-- 弹出框 -->
            <drag-modal :title="'客户分类'" :visible="visible" @ok="getData" @cancel="handleCancel" :width="'800px'">
                <a-row>
                    <a-form :form="form">
                        <a-col :span="12">
                            <a-form-item label="分类编码" v-bind="formItemLayout">
                                <a-input allowClear type="text" autocomplete="false" placeholder="请输入分类编码" v-decorator="['code',{rules: [{ required: true, message: '请输入单位名称' }],validateTrigger: ['blur']}]"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="分类名称" v-bind="formItemLayout">
                                <a-input allowClear type="text" autocomplete="false" placeholder="请输入单位名称" v-decorator="['name',{rules: [{ required: true, message: '请输入单位名称' }],validateTrigger: ['blur']}]"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </a-row>
                <template slot="footer">
                    <div>
                        <a-button type="primary" @click="handleOk">确认</a-button>
                        <a-button @click="handleCancel" class="margin-left-10">关闭</a-button>
                    </div>
                </template>
            </drag-modal>

        </div>
    </div>
</template>
<script>

import { list, save, remove } from "@/api/erp/partnerClass";

export default {
    data() {
        return {
            selectedRowKeys: [],
            columns: [
                {
                    title: "分类编码",
                    dataIndex: "code",
                    key: "code",
                },
                {
                    title: "分类名称",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "创建人姓名",
                    dataIndex: "createUserName",
                    key: "createUserName",
                },
                {
                    title: "往来单位类别",
                    key: "type",
                    dataIndex: "type",
                    customRender: (text) => {
                        return text == 1 ? "客户" : "供应商";
                    }
                },
            ],
            postData: [],//列表数据
            labelCol: 10,
            wrapperCol: 14,
            //输入框布局
            formItemLayout: {
                labelCol: { span: 10 },
                wrapperCol: { span: 14 },
            },
            ruleFormData: {
                "accountId": null,
                "code": "",// 分类编码
                "companyId": null,//租户id
                "createUserId": null,// 创建人id
                "createUserName": "",// 创建人姓名
                "name": "",// 分类名称
                "type": null,// 往来单位类别
                "updateUserId": null,//更新人ID
                "updateUserName": "",//更新人姓名
            },

            formLayout: "inline",
            pagination: {
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: (total) => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input
                                style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                size="small"
                                onPressEnter={(e) => this.changePageSize(e)}
                            />条
                        </div>
                    );
                },
                onChange: (page) => {
                    this.pagination.current = page;
                    this.getData();
                },
                showQuickJumper: true,
                showLessItems: true
            },
            customClick: (record) => ({
                on: {
                    dblclick: (event) => {
                        event.preventDefault();
                        this.selectData = [];
                        this.selectData.push(record);
                        this.Edit();
                    },
                },
            }),
            //弹窗框
            visible: false,
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: "box" });
    },
    created() {
        this.getData();
    },
    computed: {
        formItemLayout() {
            const { formLayout } = this;
            return formLayout === "inline" ? { labelCol: { span: 10 }, wrapperCol: { span: 14 }, } : {};
        },
    },
    methods: {
        /**
         * 分页
         * size: 每页好多条, current: 当前页 ,total:总条数
         */
        changePageSize(e) {
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });
            this.getData();
        },
        getData() {
            //获取列表数据
            let params = {
                current: this.pagination.current,
                size: this.pagination.pageSize,
                type: 1,
            };
            list(params).then((res) => {
                if (res.code == 200) {
                    this.postData = res.data.records;
                    Object.assign(this.pagination, {
                        total: res.data.total,
                    });
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        addshowModal() {
            this.visible = true;
            for (const key in this.ruleFormData) {
                this.ruleFormData[key] = '';
            }
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        name: this.$form.createFormField({
                            value: "",
                        }),
                        code: this.$form.createFormField({
                            value: "",
                        }),
                    };
                },
            });
        },
        handleCancel() {
            this.visible = false;
        },
        onSelectChange(keys, data) {
            this.selectedRowKeys = keys;
            this.selectData = data;
        },
        handleOk(e) {
            //提交数据
            e.preventDefault();
            this.form.validateFields((err, values) => {

                let el = /^[0-9]{2}$/;
                let code = values.code;
                if (!el.test(code)) {
                    this.$message.warning('分类编码必须是两位纯数字！');
                    return;
                }

                this.ruleFormData.type = 1;//客户
                this.ruleFormData = Object.assign(this.ruleFormData, { ...values });
                if (!err) {
                    save(this.ruleFormData).then((response) => {
                        if (response.code === 200) {
                            this.$message.success("保存成功");
                            this.handleCancel(); //关闭弹窗
                            this.getData();
                        } else {
                        }
                    });
                }
            });
        },
        Delete() {
            //删除
            if (this.selectedRowKeys.length != 1) {
                this.$message.warning('请选择一条数据！');
                return;
            }
            let _this = this;
            this.$confirm({
                title: "确认",
                content: (
                    <span>您确定要{<span style="color:red;">删除</span>}该记录吗？</span>
                ),
                onOk() {
                    remove({ id: _this.selectData[0].id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success("删除成功");
                            _this.selectedRowKeys = [];
                            _this.selectData = [];
                            _this.getData(); //刷新数据
                        } else {
                            _this.$message.error(response.message);
                        }
                    });
                },
                onCancel() { },
            });
        },
        Edit() {
            //修改
            if (!this.selectData || this.selectData.length != 1) {
                this.$message.warning('请选择一条数据！');
                return;
            }
            this.visible = true;
            this.$nextTick(() => {
                this.ruleFormData = JSON.parse(JSON.stringify(this.selectData[0]));
                this.form.setFieldsValue({
                    name: this.ruleFormData.name,
                    code: this.ruleFormData.code,
                });
            });
        },
    },
};
</script>
<style lang="less">
@import "~@/style/setting/business.less";
.accont-set-wrapper {
    display: flex;
    flex-direction: column;
    .btn-wrapper > button {
        margin-right: 10px;
    }
    .btn-wrapper > button:first-child {
        margin-bottom: 10px;
    }
    .divider {
        margin: 0.5rem 0;
        height: 0.1px;
    }
    .table-wrapper {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        height: calc(100% - 60px);
    }

    .search-wrapper {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form .ant-form-item {
            margin-bottom: 0;
        }
        .ant-input {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }
        label {
            margin-bottom: 0px;
        }
        .btn-search {
            margin-top: 4px;
        }
    }

    /** important */
    .ant-table-body {
        overflow: scroll;
        height: 0;
        max-height: none !important;
        cursor: pointer;
    }
}
</style>